<template>
  <el-form ref="form" :model="form" :rules="rules" label-width="80px" class="el-form-item__label">
    <el-row>
      <el-col :span="12">
        <div class="grid-content bg-purple">
          <el-form-item label="收房合同号" prop="id">
            <el-input v-model="form.id" disabled="true"></el-input>
          </el-form-item>
        </div>
      </el-col>
      <el-col :span="12">
        <el-button
          size="mini"
          round
          type="warning"
          @click="dialogSelectVisible = true">收房合同查询
        </el-button>
      </el-col>
      <el-dialog
        title="收房合同列表"
        :visible.sync="dialogSelectVisible"
        width="40%">
          <span>
            <el-table
              :data="tableData"
              style="width: 100%">
              <el-table-column label="业主" align="center" prop="ownerName"/>
              <el-table-column label="房产信息" align="center" prop="houseName"/>
              <el-table-column label="签约日期" align="center" prop="conInfoTime"/>
              <el-table-column label="操作" align="center">
              <template slot-scope="scope">
               <el-tag type="danger" @click="selectById(scope.row)"><i class="el-icon-check">&emsp;选中</i></el-tag>
              </template>
              </el-table-column>
            </el-table>
            <pagination
              v-show="total>0"
              :total="total"
              :page.sync="queryParams.pageNum"
              :limit.sync="queryParams.pageSize"
              @pagination="getList"/>
          </span>
      </el-dialog>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="收房合同编号" prop="sfContractNo">
          <el-input v-model="form.sfContractNo" placeholder="请输入收房合同号" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="小区(使用楼盘名)" prop="premiseName">
          <el-input v-model="form.premiseName" placeholder="请输入小区(使用楼盘名)" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="房产信息" prop="houseName">
          <el-input v-model="form.houseName" placeholder="请输入房产信息" />
        </el-form-item>
      </el-col>
      <el-col :span="12">

      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="产权地址" prop="cqAddress">
          <el-input v-model="form.cqAddress" placeholder="请输入产权地址" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="房产证书编号" prop="houseZsNo">
          <el-input v-model="form.houseZsNo" placeholder="请输入房产证书编号" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="业主姓名" prop="ownerName">
          <el-input v-model="form.ownerName" placeholder="请输入业主姓名" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="业主联系方式" prop="ownerMobile">
          <el-input v-model="form.ownerMobile" placeholder="请输入业主手机号" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="签约人姓名" prop="signUserName">
          <el-input v-model="form.signUserName" placeholder="请输入签约人(甲方)" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="签约人电话" prop="signUserMobile">
          <el-input v-model="form.signUserMobile" placeholder="请输入签约人手机号" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="物业交割时间" prop="wyjgDate">
          <el-date-picker clearable size="small" style="width: 200px"
                          v-model="form.wyjgDate"
                          type="date"
                          value-format="yyyy-MM-dd"
                          placeholder="选择物业交割时间">
          </el-date-picker>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="解约类型" prop="terminationType">
          <el-select v-model="form.terminationType" placeholder="请选择解约类型">
            <el-option label="合同到期" value="1" />
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>

    <el-form-item label="应收" prop="accountsReceivable">
      <div class="tableDate1">
        <div class="button" style="width:3%;float:right;">
          <P><el-button class="el-icon-plus" @click.prevent="addRow()"></el-button></P>
          <p><el-button class="el-icon-minus" @click.prevent="delData()"></el-button></p>
        </div>
      </div>
      <el-table
        :data="tableData1"
        ref="table"
        tooltip-effect="dark"
        border
        stripe
        style="width: 95%"
        @selection-change='selectRow'>
        <el-table-column type="selection" width="45" align="center"></el-table-column>
        <el-table-column label="序号"  type="index" width="60" align="center"></el-table-column>
        <el-table-column label="类型">
          <template slot-scope="scope">
            <el-input v-model="scope.row.name"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="金额(元)">
          <template slot-scope="scope">
            <el-input v-model="scope.row.loveer" @change="yingtui(scope.row.loveer)"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="备注">
          <template slot-scope="scope">
            <el-input v-model="scope.row.beizhu"></el-input>
          </template>
        </el-table-column>
      </el-table>
    </el-form-item>

    <el-form-item label="应退" prop="finalStatement">
      <div class="tableDate2">
        <div class="button" style="width:3%;float:right;">
          <P><el-button class="el-icon-plus" @click.prevent="addRow1()"></el-button></P>
          <p><el-button class="el-icon-minus" @click.prevent="delData1()"></el-button></p>
        </div>
      </div>
      <el-table
        :data="tableData2"
        ref="table"
        tooltip-effect="dark"
        border
        stripe
        style="width: 95%"
        @selection-change='selectRow'>
        <el-table-column type="selection" width="45" align="center"></el-table-column>
        <el-table-column label="序号"  type="index" width="60" align="center"></el-table-column>
        <el-table-column label="类型">
          <template slot-scope="scope">
            <el-input v-model="scope.row.name"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="金额(元)">
          <template slot-scope="scope">
            <el-input v-model="scope.row.money" @change="yingshou(scope.row.money)"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="备注">
          <template slot-scope="scope">
            <el-input v-model="scope.row.beizhu"></el-input>
          </template>
        </el-table-column>
      </el-table>
    </el-form-item>
    <el-form-item label="备注" prop="remark">
      <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">下一步</el-button>
    </el-form-item>

    <span  :size="500" v-model="sum" v-if="this.sum<0">合计应退{{-this.sum}}元</span>
    <span v-model="sum" :size="500" v-if="this.sum>0">合计应收{{this.sum}}元</span>
  </el-form>
</template>

<script>
import { listContract, getContract, delContract, addContract, updateContract } from "@/api/contract/contract";
import { listTermination, getTermination, delTermination, addTermination, updateTermination } from "@/api/contract/termination";
export default {
  name: "add",
  data(){
    return{
      form:{

      },
      sum:0,
      sumtotal:0,
      sumtotal2:0,
      total:0,
      tableData:[],
      queryParams:{
        pageNum:1,
        pageSize:3
      },
      rules:{
        id: [
          {required: true, message: '请输入收房合同号', trigger: 'blur'},
        ],
        sfContractNo: [
          {required: true, message: '请输入收房合同编号', trigger: 'blur'},
        ],
        houseName: [
          {required: true, message: '请输入房产信息', trigger: 'blur'},
        ],
        cqAddress: [
          {required: true, message: '请输入产权地址', trigger: 'blur'},
        ],
        houseZsNo: [
          {required: true, message: '请输入房产证书编号', trigger: 'blur'},
        ],
        ownerName: [
          {required: true, message: '请输入业主信息', trigger: 'blur'},
        ],
        ownerMobile: [
          {required: true, message: '请输入业主联系方式', trigger: 'blur'},
        ],
        signUserName: [
          {required: true, message: '请输入签约人姓名', trigger: 'blur'},
        ],
        signUserMobile: [
          {required: true, message: '请输入签约人电话', trigger: 'blur'},
        ],
      },
      dialogSelectVisible:false,
      historyForm:{

      },
      tableData1: [{
        rowNum: 1,
      },],
      tableData2: [{
        rowNum: 1,
      },]
    }
  },
  methods:{
    //应退
    yingtui(rows){
      this.sumtotal+=Number(rows)
      this.sum=this.sumtotal-this.sumtotal2
    },
    //应收
    yingshou(rows){
      this.sumtotal2+=Number(rows)
      this.sum=this.sumtotal-this.sumtotal2
    },
    //合计
    heji(){

    },
    selectById(row) {
      this.form = row
      this.dialogVisible = false
    },
    getList() {
      listContract(this.queryParams).then(response => {
        this.tableData = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateTermination(this.form).then(response => {
              this.msgSuccess("录入成功");
              this.open = false;
              this.getList();
            });
          } else {
            addTermination(this.form).then(response => {
              this.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    // 增加行
    addRow () {
      var list = {
        rowNum: '',
      }
      this.tableData1.unshift(list)
    },
    // 获取表格选中时的数据
    selectRow (val) {
      this.selectlistRow = val
    },
    // 删除选中行
    delData () {
      for (let i = 0; i < this.selectlistRow.length; i++) {
        let val = this.selectlistRow
        // 获取选中行的索引的方法
        // 遍历表格中tableData数据和选中的val数据，比较它们的rowNum,相等则输出选中行的索引
        // rowNum的作用主要是为了让每一行有一个唯一的数据，方便比较，可以根据个人的开发需求从后台传入特定的数据
        val.forEach((val, index) => {
          this.tableData1.forEach((v, i) => {
            if (val.rowNum === v.rowNum) {
              // i 为选中的索引
              this.tableData1.splice(i, 1)
            }
          })
        })
      }
      // 删除完数据之后清除勾选框
      this.$refs.tableData1.clearSelection()
    },
    // 增加行
    addRow1 () {
      var list = {
        rowNum: '',
      }
      this.tableData2.unshift(list)
    },
    // 获取表格选中时的数据
    selectRow1 (val) {
      this.selectlistRow = val
    },
    // 删除选中行
    delData1 () {
      for (let i = 0; i < this.selectlistRow.length; i++) {
        let val = this.selectlistRow
        // 获取选中行的索引的方法
        // 遍历表格中tableData数据和选中的val数据，比较它们的rowNum,相等则输出选中行的索引
        // rowNum的作用主要是为了让每一行有一个唯一的数据，方便比较，可以根据个人的开发需求从后台传入特定的数据
        val.forEach((val, index) => {
          this.tableData2.forEach((v, i) => {
            if (val.rowNum === v.rowNum) {
              // i 为选中的索引
              this.tableData2.splice(i, 1)
            }
          })
        })
      }
      // 删除完数据之后清除勾选框
      this.$refs.tableData2.clearSelection()
    },
  },
  created() {
    this.getList()
  }
}
</script>

<style scoped>
.el-form-item__label {
  text-align: justify;
}
</style>
